<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text.html; charset=utf-8">
<title>工作区窗口模块功能</title>
<style type="text/css">
    #module{position: absolute;top:200px;left:200px;right:200px;bottom:200px;border: 4px solid black;background-color:black;border-radius: 10px;}
    #float{position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-color: red;border-radius: 10px;}
</style>
</head>
<body>
<div id="module">
    <div id="float"></div>
</div>
<script type="text/javascript">
    var module = document.getElementById("module");
    var body = document.body;
    var h = module.offsetHeight;
    var w = module.offsetWidth;
    var resizing = false;
    var moving = false;
    var direction = undefined;
    var startX = undefined;
    var startY = undefined;
    var moduleStyle = document.defaultView.getComputedStyle(module,false);
    var mtop = moduleStyle.top.slice(0,-2);
    var mleft = moduleStyle.left.slice(0,-2);
    var mright = moduleStyle.right.slice(0,-2);
    var mbottom = moduleStyle.bottom.slice(0,-2);
    var size = {top:mtop,left:mleft,right:mright,bottom:mbottom};
    var cursorList = {};
    var sizeList = {right:['x',false],bottom:['y',false],left:['x',true],top:['y',true]};
    var sizeChange = {e:['right'],s:['bottom'],w:['left'],n:['top'],
    se:['right','bottom'],sw:['bottom','left'],nw:['left','top'],ne:['top','right']};
    var cofim = function(event){
        var x = event.offsetX;
        var y = event.offsetY;
        direction = compute(x,y,w,h);
        body.style.cursor = direction+'-resize';
    }
    var move = function(event){
        cofim(event);
        console.log("mousemove->module->move");
    }
    var setSize = function(event){
        var changeList = sizeChange[direction];
        var change = {x:(event.screenX-startX),y:(event.screenY-startY)};
        var i,item;
        console.log(change);
        for(i in changeList){
            item = changeList[i];
            var num = sizeList[item][1] ? Number(size[item]) + Number(change[sizeList[item][0]]) : Number(size[item]) - Number(change[sizeList[item][0]]);
            console.log(num);
            module.style[item] = num + 'px';
        }
        console.log("mousemove->module->setSize");
    }
    var up = function(event){
        if(!resizing) return;
        resizing = false;
        startX = undefined;
        startY = undefined;
        mtop = moduleStyle.top.slice(0,-2);
        mleft = moduleStyle.left.slice(0,-2);
        mright = moduleStyle.right.slice(0,-2);
        mbottom = moduleStyle.bottom.slice(0,-2);
        h = module.offsetHeight;
        w = module.offsetWidth;
        size = {top:mtop,left:mleft,right:mright,bottom:mbottom};
        body.style.cursor = "default";
        window.removeEventListener("mousemove", setSize);
        console.log('mouseup->module');
        window.removeEventListener('mouseup',up);
    }
    module.addEventListener("mousedown", function(event){
        if(!moving) return
        resizing = true;
        console.log(event);
        startX = event.screenX; 
        startY = event.screenY;
        module.removeEventListener("mousemove", move);
        window.addEventListener("mousemove", setSize);
        console.log('mousedown->module');
        window.addEventListener('mouseup',up);
    });
    module.addEventListener("mouseover", function(){
        if(resizing) return;
        moving = true;
        cofim(event);
        module.addEventListener("mousemove", move);
        console.log('mouseover->module');
    });
    module.addEventListener("mouseout", function(){
        moving = false;
        if(resizing) return;
        body.style.cursor = "default";
        module.removeEventListener("mousemove", move);
        console.log('mouseout->module');
    });
    var float = document.getElementById("float");
    float.addEventListener("mouseover", function(event){
        event.stopPropagation();
    });
    float.addEventListener("mouseout", function(event){
        event.stopPropagation();
    });
    function compute(x,y,w,h) {
        a = x < 10 ? 1 : 0;
        b = y < 10 ? 1 : 0;
        c = (w - x) < 10 ? 1 : 0;
        d = (h - y) < 10 ? 1 : 0;
        if(a+b+c+d >= 2){
            if (a) {
                return b ? 'nw' : 'sw';
            }else{
                return b ? 'ne' : 'se';
            }
        }else{
            if (a || c) {
                return a ? 'w' : 'e';
            }else{
                return b ? 'n' : 's';
            }
        }
    }
</script>
</body>
</html>